<template>
  <el-dialog
    width="80%"
    v-model="visible"
    @closed="onReset"
    append-to-body
    :title="dialogDatas.title"
    class="packageDialog"
  >
    <el-table
      :data="tableDataR"
      style="width: 100%"
      highlight-current-row
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="rechargeTime" label="充值时间" />
      <el-table-column prop="rechargePoints" label="充值点数" />
      <el-table-column prop="remainingPoints" label="剩余点数" />
    </el-table>
    <Pagination
      :pageable="pageR"
      :handleSizeChange="handleSizeChangeR"
      :handleCurrentChange="handleCurrentChangeR"
    />
    <template #footer>
      <span class="dialog-footer flex justify-center my6">
        <el-button @click="visible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue';
import type { IUserItem } from '@/api/user/type';
import { useTable } from '@/hooks/useTable';
import { institutionRechargeRecordRequest } from '@/api/cooperation/index';
interface User {
  rechargeTime: string;
  rechargePoints: string;
  remainingPoints: string;
}
let tableDataR = reactive({});
let pageR = reactive({});
let handleCurrentChangeR = reactive({});
let handleSizeChangeR = reactive({});

// defineProps({
//   dialogDatas: {
//     required: true
//   }
// });

//   当前选择的行的id
const visible = ref(false);
const formRef = ref();
let dialogDatas = ref({});
watch(dialogDatas, (newVal) => {
  const { tableData, page, loading, handleCurrentChange, handleSizeChange } = useTable({
    apiFn: institutionRechargeRecordRequest,
    params:()=> {return {orgId: dialogDatas.value.row.id}}
  });
  tableDataR = tableData;
  pageR = page;
  handleCurrentChangeR = handleCurrentChange;
  handleSizeChangeR = handleSizeChange;
});
let institutionRechargeRecordDatas = ref(null);
let multipleSelection = ref<User[]>([]);
//   当前选择的行的数据

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};

const init = (data?: IUserItem) => {
  visible.value = true;
  
  // if (data) dialogDatas.value = Object.assign({}, dialogDatas.value, data);
  if (data) dialogDatas.value = JSON.parse(JSON.stringify(data));

  // dialogDatas = data!;
};

const onReset = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
};

defineExpose({ init });

onMounted(() => {});
</script>

<style lang="scss">
.packageDialog {
}
</style>
